import React from 'react';
import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
import ComposableRegion from '@akinon/pz-theme/src/chrome/composable-region';
import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
import { LiveCheckoutPageContext } from '@akinon/pz-theme/src/chrome/live-checkout-page-context';
import { CheckoutPiecesProvider } from '@akinon/pz-theme/src/chrome/checkout-pieces-provider';

/**
 * Checkout internals are sealed, checkout placement is composable. The body
 * slot's composition positions the real flow, steps and summary through
 * checkout outlet blocks; the flow itself always renders — in an outlet when
 * one claims it, in its default place below otherwise. No slot takes the
 * flow as its fallback: a composition may move the payment steps, never
 * replace them. Ordering is load-bearing: the body slot mounts BEFORE
 * `children`, so outlet targets register before the flow's first paint.
 *
 * The body's takeover is offered on the flow itself, by the region wrapping
 * it: the designer hovers the real checkout content and gets the same
 * affordance every other page has, instead of a dashed band above content
 * that answers a hover with nothing. Starting a composition that way is why
 * the body slot's own band is suppressed — one slug, one CTA.
 */
export default function CheckoutLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <LiveCheckoutPageContext>
      <CheckoutPiecesProvider>
        <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutTop} />
        <ChromeSlot
          slug={PLACEHOLDER_SLUGS.checkoutBody}
          emptyZoneBand={false}
        />
        <ComposableRegion
          slug={PLACEHOLDER_SLUGS.checkoutBody}
          label="The checkout flow stays code-owned — take this area over to arrange where the flow, steps and summary render"
          composedNote="The checkout flow renders here until a checkout flow outlet places it — it stays code-owned and inert on the canvas"
        >
          {children}
        </ComposableRegion>
        <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutBottom} />
      </CheckoutPiecesProvider>
    </LiveCheckoutPageContext>
  );
}